<template>
    <div
        class="HonorList"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 荣誉榜模块 -->
        <box-group-wrap pageTitle="荣誉榜" :isShowData="isShowData" >
            <template slot="wrapBody">
                <div class="ry_wrap">
                    <ul class="text">
                        <li v-for="item in dataInfoList" :key="item.id">
                            <img src="@/assets/img/khindex/rybjp.png" alt />
                            <span>{{item.goldList}}</span>
                        </li>
                    </ul>
                </div>
            </template>
           <template slot="wrapRight">
                <span @click="noticeContentMore">更多>></span>
            </template>
        </box-group-wrap>
         <!-- 查看更多荣誉信息 -->
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="dialogNoticeFlag"
            append-to-body
            center
            width="900px"
            class="dialog_wrap"
        >
            <div slot="title">荣誉榜列表</div>
            <el-table
                :data="tableData"
                width="100%"
                border
                highlight-current-row
                stripe
                class="heard-bg"
            >
                <el-table-column label="荣誉榜顺序" prop="goldOrder" width="120"></el-table-column>
                <el-table-column label="荣誉榜内容" prop="goldList" show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column label="状态" width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isRead === '0'" class="redColor">未读</span>
                        <span v-else-if="scope.row.isRead === '1'" class="buleColor">已读</span>
                    </template>
                </el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPageNotice"
                    :handleChangeSize="handleChangeSizeNotice"
                    :currentPage="currentPageNotice"
                    :pageSize="pageSizeNotice"
                    :total="totalNotice"
                />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import Pagination from '@/components/Pagination/Pagination.vue';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';

export default {
    name: 'HonorList',
    data() {
        return {
            pageLoading: '',
            isShowData: false,
            dataInfoList: [],
            dialogNoticeFlag:false,
            tableData:[],
            currentPageNotice:0,
            // 页码大小
            pageSizeNotice: 5,
            // 总数
            totalNotice: 0,
        }
    },
    components: { 'box-group-wrap': BoxGroupWrap,Pagination },
    async mounted() {
        await this.getHonorListDataMonth();
    },
    methods: {
        // 获取 荣誉榜的数据
        async getHonorListDataMonth() {
            let params = {
                pageNum: 1,
                pageSize: 5
            };
            await this.$post.homePage.pageHonor(params).then((res) => {
                if (res.data.success) {
                    this.isShowData = true;
                    this.pageLoading = false;
                    this.dataInfoList = res.data.content.records;

                } else {
                    this.isShowData = false;
                    this.pageLoading = false;
                }
            }, () => {
                this.pageLoading = false;
                this.isShowData = false;
            });
        },
                // 点击荣誉榜更多
        getInitNoticeData() {
            const params = {
                pageNum: this.currentPageNotice,
                pageSize: this.pageSizeNotice,
            };
             this.$post.honor.pageHonor(params).then((res) => {
                if (res.data.success) {
                    console.log('检查数据是否拿到了 ',);
                    this.tableData = res.data.content.records || [];
                    this.totalNotice = res.data.content.total;
                }
            });
        },
                // 查看更多 荣誉榜
        noticeContentMore() {
            this.dialogNoticeFlag = true;
            this.getInitNoticeData();
        },
                // 页码切换方法
        hanleChangeCurrentPageNotice(val) {
            this.currentPageNotice = val;
            this.getInitNoticeData();
        },
        // 切换分页大小方法
        handleChangeSizeNotice(val) {
            this.pageSizeNotice = val;
            this.getInitNoticeData();
        },
    },
}
</script>
<style  scoped lang="scss">
.HonorList {
    .ry_wrap {
        ul.text li {
            span {
                width: calc(100% - 50px);
                line-height: 29px;
                height: 30px;
                margin-left: 8px;
                display: inline-block;
                vertical-align: super;
                font-size: 14px;
            }
        }
    }
}
</style>